<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <link href="https://cdn.staticfile.org/wangeditor5/5.1.23/css/style.min.css" rel="stylesheet">
<style>


</style>
</head>
<body>
<div id="app">

    <div style="border: 1px solid #ccc">
        <div id="toolbar-container" style="border-bottom: 1px solid #ccc;"><!-- 工具栏 --></div>
        <div id="editor-container" style="height: 300px;"><!-- 编辑器 --></div>
    </div>

</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>

<script src="https://cdn.staticfile.org/wangeditor5/5.1.23/index.min.js"></script>

<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {

            }
        },
        methods: {

        }
    })


    /**********富文本编辑器相关js开始***********/
    const { createEditor, createToolbar } = window.wangEditor
    const editorConfig = {
        placeholder: '请填写详情...',
        onChange(editor) {
            const html = editor.getHtml()
            console.log('editor content', html)
        }
    }
    const editor = createEditor({
        selector: '#editor-container',
        html: '<p><br></p>',
        config: editorConfig,
        mode: 'simple',
    })
    const toolbarConfig = {}
    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'simple',
    })
    /**********富文本编辑器相关js结束***********/
</script>
</html>